<template>
<div class="bgc">
  <!-- 头部导航栏 -->
  <span class="marg">
  状态 :
    <el-select class="inputPlace in1" size="mini" v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="正常" value="0"></el-option>
      <el-option label="暂停" value="1"></el-option>
    </el-select>
  </span>

  <span>
  搜索 :<el-input
    class="inputPlace in2"
    size="mini"
    placeholder="请输入内容"
    v-model="input2">
  </el-input>
  </span>

  <el-button class="elBtn" type="success" size="mini" @click="handleCheckInfo">查询</el-button>
  <el-button class="elBtn" type="success" size="mini" @click="handleAddInfo">添加</el-button>

<!-- 主体显示表格 -->
   <el-table
      :data="tableData"
      class="table1">
      <el-table-column
        prop="id"
        label="方案主键ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="level_a"
        label="甲方标准"
        width="180">
      </el-table-column>
      <el-table-column
        prop="level_b"
        label="乙方标准">
      </el-table-column>
      <el-table-column
        prop="level_c"
        label="丙方标准"
        width="180">
      </el-table-column>
      <el-table-column
        prop="project_code"
        label="方案编码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="project_name"
        label="方案名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="project_status"
        label="方案状态"
        width="180">
      </el-table-column>
      <el-table-column
        prop="project_score"
        label="总分值"
        width="180">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="更新时间"
        width="180">
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">修改</el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
<!-- 页数显示 -->
<el-pagination
class="pageInfo"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"

      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
</el-pagination>
    <!-- <div class="page">
      共{{count}}条：
    <el-pagination
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
    class="pageInfo"
    background
    :current-page='currentPage'
    :page-size='pageSize'
    layout="prev, pager, next, jumper"
    :total="count">
    </el-pagination>
  </div> -->
<!-- 修改弹窗 -->
  <el-dialog title="修改方案" :visible.sync="dialogCorFormVisible">
  <el-form v-model="corForm">
    <el-form-item label="方案主键ID" :label-width="formLabelWidth">
      <el-input v-model="corForm.id" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="方案状态" :label-width="formLabelWidth">
      <el-input v-model="corForm.project_status" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="方案编码" :label-width="formLabelWidth">
      <el-input v-model="corForm.project_code" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="方案名称" :label-width="formLabelWidth">
      <el-input v-model="corForm.project_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="总分值" :label-width="formLabelWidth">
      <el-input v-model="corForm.project_score" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="甲方标准" :label-width="formLabelWidth">
      <el-input v-model="corForm.level_a" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="乙方标准" :label-width="formLabelWidth">
      <el-input v-model="corForm.level_b" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="丙方标准" :label-width="formLabelWidth">
      <el-input v-model="corForm.level_c" autocomplete="off"></el-input>
    </el-form-item>
    
  </el-form>
    <div slot="footer" class="dialog-footer">
    <el-button @click="dialogCorFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="handlCorPlan">确 定</el-button>
  </div>
</el-dialog>

<!-- 新增弹窗 -->
  <el-dialog title="新增方案" :visible.sync="dialogFormVisible">
    <el-form ref="form" :model="form">
      <el-form-item label="方案状态" :label-width="formLabelWidth"
      prop="project_status"
      :rules="[
        { required: true, message: '状态不能为空',trigger: 'blur'}]"
      >
        <el-input v-model="form.project_status" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="方案编码" :label-width="formLabelWidth"
      prop="project_code"
      :rules="[
        { required: true, message: '编码不能为空',trigger: 'blur'}]"
      >
        <el-input v-model="form.project_code" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="方案名称" :label-width="formLabelWidth"
      prop="project_name"
      :rules="[
        { required: true, message: '名称不能为空',trigger: 'blur'}]"
      >
        <el-input v-model="form.project_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="总分值" :label-width="formLabelWidth">
        <el-input v-model="form.project_score" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="甲方标准" :label-width="formLabelWidth">
        <el-input v-model="form.level_a" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="乙方标准" :label-width="formLabelWidth">
        <el-input v-model="form.level_b" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="丙方标准" :label-width="formLabelWidth">
        <el-input v-model="form.level_c" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <el-table
    :data="tableData1"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="分类名称"
      width="180"
      >
      <template slot-scope="scope">
        <!-- <h4>{{JSON.stringify(scope)}}</h4> -->
        <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
      </template>
    </el-table-column>

    <el-table-column
      prop="code"
      label="分类编码"
      width="180">
      <template slot-scope="scope">
        <el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
      </template>
    </el-table-column>

    <el-table-column
      prop="score"
      label="分值">
      <template slot-scope="scope">
        <el-input v-model="scope.row.score" placeholder="请输入内容"></el-input>
      </template>

    </el-table-column>

    <el-table-column
      prop="description"
      label="描述">
      <template slot-scope="scope">
        <el-input v-model="scope.row.description" placeholder="请输入内容"></el-input>
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRows(scope.$index, tableData1)"
          type="button"
          size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

      <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handlAddPlan('form')">确 定</el-button>
    </div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios';
import qs from 'qs'
export default{
  data(){
    return{
      id:'',
      input2:'',
      select:'',
      tableData:[],
      tableData1: [{
          name:'首页',
          code:'001',
          score:'10',
          description:'出院后24小时完成'
        },
        {
          name:'首页',
          code:'001',
          score:'10',
          description:'出院后24小时完成'
        }],
      dialogFormVisible:false,
      dialogCorFormVisible:false,
      form:{},
      corForm:{},
      formLabelWidth: '120px',
      count:0,
      pageSize:10,
      currentPage:1,
    }
  },
  mounted(){this.handleAsk()},
  methods:{
    handleAsk(){
      axios.get('http://www.away1995.cn/api/project/pages', {
          params: {
          page:1
      }}).then((response) =>{
          console.log(response.data.data.result);
          this.tableData=response.data.data.result
          this.pagesize=response.data.data.pages
          this.pages=response.data.data.pageSize
          this.count=response.data.data.count
        });},
    handleAddInfo(){
      console.log('添加')
      this.dialogFormVisible=true
    },
    handleCheckInfo(){
          axios.get('/api/login', {
          params: {
          keyword: this.input2,
          status:this.select,
          page:this.currentPage,
          pageSize:this.pageSize
      }}).then((response) =>{
          console.log(response);
        });
      axios.get('http://www.away1995.cn/api/project/pages', {
          params: {
          keyword: this.input2,
          status:this.select,
          page:this.currentPage,
          pageSize:this.pageSize
      }}).then((response) =>{
          console.log(response.data.data.result);
          this.tableData=response.data.data.result
          this.pagesize=response.data.data.pages
          this.count=response.data.data.count
        });
    },
    handlAddPlan(form){
      this.$refs[form].validate((valid) => {
        if(valid){
          axios.post('http://www.away1995.cn/api/project/create',qs.stringify({
        "project_status": this.form.project_status,
        "project_code": this.form.project_code,
        "project_name": this.form.project_name,
        "project_score": this.form.project_score,
        "level_a": this.form.level_a,
        "level_b": this.form.level_b,
        "level_c": this.form.level_c,
      })    
     ).then((response)=>{
        console.log('添加成功',response)
        this.dialogFormVisible = false,
        this.handleAsk()
        this.form={}
      })
        }else{
          console.log('error');
          return false;
        }
      })
    },
    handlCorPlan(){
      this.id=this.corForm.id
      axios.put(`http://www.away1995.cn/api/project/${this.id}/update`,qs.stringify({
        "project_status": this.corForm.project_status,
        "project_code": this.corForm.project_code,
        "project_name": this.corForm.project_name,
        "project_score": this.corForm.project_score,
        "level_a": this.corForm.level_a,
        "level_b": this.corForm.level_b,
        "level_c": this.corForm.level_c,
      })
      ).then((response)=>{
        console.log('修改成功',response)
        this.dialogCorFormVisible = false,
        this.handleAsk()
      })
    },
    handleSizeChange(val){
      console.log('查看某页数据')
      this.pageSize=val
      this.handleCheckInfo()
    },
    handleCurrentChange(val){
      console.log('当前页改变')
      console.log(val)
      this.currentPage=val
      this.handleCheckInfo()
    },
    deleteRows(index,rows){
      console.log(index,rows)
    },
    deleteRow(index, rows) {
      this.id=rows[index].id
      console.log(rows[index].id,'id')
      axios.delete(`http://www.away1995.cn/api/project/${this.id}`)
      .then(()=>{console.log('删除成功')})
    },
    handleEdit(index, rows){
      this.dialogCorFormVisible=true
      this.corForm=rows
      console.log(index,rows)
      

    }
  }
}
</script>
<style scoped>
.bgc{
  overflow: hidden;
  background-color:rgb(242,242,242);
  height:100%;
  padding:10px 0px 10px 10px
}
.inputPlace{
  display:inline-block;
  margin-left:5px
}
.in1{
  width:10%
}
.in2{
  width:25%;
  margin-right:20px
}
.marg{
  margin-right:30px
}
.elBtn{
  background-color:rgb(34,101,66);
  margin-left:15px;
}
.page{
  float:right;
}
.pageInfo{
  display:inline-block
}
.table1{
  width: 100%;
  margin-top:10px;
}
.tablehead{
  background-color:rgb(145, 90, 90)
}
</style>
